<template>
    <div class="main">
        <van-nav-bar class="header" title="登陆" />
        <div class="content">
            <center>
                <img style="width:80px;height:80px;border-radius:20px;margin-bottom:15px;" src="../assets/icons.png"/>
            </center>
            <input  @on-keydown="endLogin" type="text" v-model="username" placeholder="请输入账号"/>
            <input  @on-keydown="endLogin" type="password" v-model="pwd" placeholder="请输入密码"/>
            <van-button @click="sendLogin" :loading="Landing" class="loginbtn" size="large">登陆</van-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                username:'',
                pwd:'',
                Landing:false
            };
        },
        created: function() {
            window.$vm = window.$vm || {};
            $vm.Login = this;
        },
        methods:{
            stopdefault:()=>{},
            endLogin:function(){
                if(event.keyCode == 13){
                    $vm.Login.sendLogin();
                    event.preventDefault();  
                }
            },
            sendLogin:()=>{
                console.log(1);
                if($vm.Login.nickname == '' || $vm.Login.pwd == ''){
                    $vm.Login.$toast.fail('账户名和密码不能为空！');
                    return;
                }
                $vm.Login.Landing = true;
                $vm.Login.$fn.login({
                    username:$vm.Login.username,
                    pwd:$vm.Login.pwd,
                    type:$vm.Login.loginType
                },(res)=>{
                    console.log(res);
                    $vm.Login.Landing = false;
                    if(res.status == 1){
                        console.log(res);
                        $vm.Login.$fn.setCookie('user',res.user_info);
                        $vm.Login.$fn.setCookie('secret',res.key);
                        $vm.Login.$router.push({path:'/index'})
                    }else{
                        console.log(res);
                        $vm.Login.$fn.setCookie('user',{});
                        $vm.Login.$fn.setCookie('secret',null);
                        $vm.Login.$toast.fail('登陆失败');
                    }
                })
            },
        }
    };
</script>

<style lang="less" scoped>
    *{font-family: 微软雅黑;}
    body,html,.main{
        width:100%;
    }
    .header{
        border-bottom: 1px solid #c2c2c2;margin-top: 40px;
        .van-nav-bar__title{
            font-size: 20px;
        }
    }
    .content{
        position:fixed; width:100%;top:87px;bottom:0;background:#f2f2f2;padding-top: 32px;
        input{
            display: block;margin:0 24px 24px;width:calc(100% - 68px);border:none;height:50px;padding:0 10px;border-radius: 5px;
            box-shadow:0 0 3px #f3f3f3;font-size: 14px;
            &::-webkit-input-placeholder{
                color:#b3b3b3;
            }
        }
        .loginbtn{
            display: block;margin:0 24px 24px;width:calc(100% - 48px);border:none;height:50px;background:#0f85ff;border-radius:5px;
            font-size: 20px;color:#fff
        }
    }
</style>
